<template>
  <div class="list-content">
    <div
      class="scenic"
      @click="toDetail(item.id)"
      v-for="item in dataList"
      :key="item.id"
    >
      <var-image
        :radius="5"
        width="174px"
        height="200px"
        fit="cover"
        :src="item.scenic_img[0]"
      />
      <var-ellipsis :tooltip="false" class="spot">{{ item.spot }}</var-ellipsis>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  dataList: any[]
}>()

const router = useRouter()

const toDetail = id => {
  router.push('/scenic-detail/' + id)
}
</script>

<style scoped lang="scss">
.list-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2px;
  .scenic {
    position: relative;
    margin-bottom: 10px;

    .spot {
      max-width: 120px;
      position: absolute;
      bottom: 10px;
      left: 10px;
      color: #fff;
      z-index: 99;
    }
  }
}
</style>
